<template>
  <el-dialog
    title="负载均衡方案"
    :visible="visible"
    :close-on-click-modal="false"
    width="45%"
    :before-close="handleClose"
  >
    <el-form ref="form" :rules="rules" :model="formData" label-width="120px">
      <el-form-item label="应用的服务类别" prop="SystemTypeId">
        <el-select v-model="formData.SystemTypeId">
          <el-option-group
            v-for="group in groupType"
            :key="group.Id"
            :label="group.GroupName"
          >
            <el-option
              v-for="item in group.ServerType"
              :key="item.Id"
              :label="item.SystemName"
              :value="item.Id"
            />
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item label="方案名" prop="Scheme">
        <el-input v-model="formData.Scheme" maxlength="50" />
      </el-form-item>
      <el-form-item label="负载均衡方式" prop="TransmitType">
        <el-select v-model="formData.TransmitType" clearable placeholder="负载均衡方式">
          <el-option label="ZoneIndex" :value="1" />
          <el-option label="HashCode" :value="2" />
          <el-option label="Number" :value="3" />
          <el-option label="FixedType" :value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否自动分配" prop="IsAuto">
        <el-switch v-model="formData.IsAuto" />
      </el-form-item>
      <el-form-item label="备注" prop="Show">
        <el-input v-model="formData.Show" maxlength="50" />
      </el-form-item>
    </el-form>
    <el-row slot="footer" style="text-align:center;line-height:20px">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="default" @click="handleReset">重置</el-button>
    </el-row>
  </el-dialog>
</template>
<script>
import moment from 'moment'
import { GetGroupAndType } from '@/api/rpcMer/serverBind'
import { Add } from '@/api/transmit/scheme'
export default {
  props: {
    rpcMerId: {
      type: Number,
      default: 0
    },
    visible: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data() {
    const checkScheme = (rule, value, callback) => {
      if (value == null || value === '') {
        callback()
        return
      } else if (!RegExp('^(\\w|[.])+$').test(value)) {
        callback(new Error('方案名应由数字字母点组成！'))
        return
      }
      callback()
    }
    return {
      groupType: [],
      formData: {
        SystemTypeId: null,
        Scheme: null,
        TransmitType: null,
        IsAuto: false,
        Show: null
      },
      rules: {
        Scheme: [
          { required: true, message: '方案名不能为空!', trigger: 'blur' },
          { validator: checkScheme, trigger: 'blur' }
        ],
        SystemTypeId: [
          { required: true, message: '应用的服务类别不能为空!', trigger: 'blur' }
        ],
        TransmitType: [
          { required: true, message: '负载均衡方式不能为空!', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.load()
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    moment,
    handleClose() {
      this.$emit('cancel', false)
    },
    async load() {
      this.formData = {
        SystemTypeId: null,
        Scheme: null,
        TransmitType: null,
        IsAuto: false,
        Show: null
      }
      if (this.groupType.length === 0 || this.rpcMerId !== this.oldRpcMerId) {
        this.oldRpcMerId = this.rpcMerId
        this.groupType = await GetGroupAndType(this.rpcMerId, null)
      }
    },
    save() {
      const that = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          that.add()
        }
      })
    },
    async add() {
      const data = {
        RpcMerId: this.rpcMerId,
        SystemTypeId: this.formData.SystemTypeId,
        Scheme: this.formData.Scheme,
        TransmitType: this.formData.TransmitType,
        IsAuto: this.formData.IsAuto,
        Show: this.formData.Show
      }
      await Add(data)
      this.$message({
        message: '添加成功！',
        type: 'success'
      })
      this.$emit('cancel', true)
    },
    handleReset() {
      this.formData = {
        RpcMerId: null,
        SystemTypeId: null,
        Scheme: null,
        TransmitType: null,
        IsAuto: false,
        Show: null
      }
      this.$refs['form'].resetFields()
    }
  }
}
</script>
